import { use, useReducer, useState } from "react";
//定义修改方法
function reducer(state, action) {
  //action有type和action，type用来标记做什么，action是修改的属性和值
  switch (action.type) {
    case "change-x":
      return { ...state, x: action.payload };
    case "change-y":
      return { ...state, y: action.payload };
    default:
      return state;
  }
}

//定义初始数据
const initState = {
  x: 0,
  y: 0,
  w: 100,
  h: 100,
};
function App() {
  //useReducer和useState都是定义函数组件的响应式数据
  //当数据简单都为基本类型数据时，用useState创建
  //当数据复杂量大或者为对象数据时，用useReducer创建



  // 创建一个状态管理器
  const [state, dispatch] = useReducer(reducer, initState);

  function mouseMove(e) {
    dispatch({
      type: "change-x",
      payload: e.clientX,
    });
    dispatch({
      type: "change-y",
      payload: e.clientY,
    });
  }

  return (
    <div
      onMouseMove={mouseMove}
      className="App"
      style={{ width: "100vw", height: "100vh", backgroundColor: "#6cf" }}
    >
      <h1>
        x:{state.x}------y:{state.y}, w:{state.w}------h:{state.h}
      </h1>
    </div>
  );
}

export default App;
